<template>
    <div class="page-main-content">

        <div class="page-main-content-top">
            <el-breadcrumb  separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><router-link slot-scope="scope" :to="{ name: 'errorlist'}">{{title}}</router-link></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-panl">
            
            <div class="filter">
                <el-row :gutter="20" style="margin-bottom: 15px">
                    <el-col :span="6">
                        <el-input placeholder="请输入ID" v-model="filterParams.id">
                            <template slot="prepend">Id</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="filterParams.projectType" clearable placeholder="项目平台">
                            <el-option label="请选择项目平台" value="">
                            </el-option>
                            <el-option label="货主移动端" :value="1">
                            </el-option>
                            <el-option label="车队移动端" :value="2">
                            </el-option>
                            <el-option label="速运后台" :value="3">
                            </el-option>
                            <el-option label="速运移动端" :value="4">
                            </el-option>
                            <el-option label="车队货主pc" :value="5">
                            </el-option>
                            <el-option label="商城pc" :value="6">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="请输入ID" v-model="filterParams.errorInfo">
                            <template slot="prepend">错误信息</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="filterParams.systemId" clearable placeholder="系统类型" style="display: block">
                            <el-option label="请选择系统类型" value="">
                            </el-option>
                            <el-option label="windows" :value="1">
                            </el-option>
                            <el-option label="android" :value="2">
                            </el-option>
                            <el-option label="ios" :value="3">
                            </el-option>
                            <el-option label="windows phone" :value="4">
                            </el-option>
                            <el-option label="ipad" :value="5">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                
                <el-row :gutter="20">                    
                    <el-col :span="8">
                        <el-date-picker v-model="filterParams.id" type="daterange" align="right" placeholder="选择日期范围">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="filterParams.browserId" clearable placeholder="浏览器" style="display: block">
                            <el-option label="请选择浏览器平台" value="">
                            </el-option>
                            <el-option label="ie" :value="1">
                            </el-option>
                            <el-option label="firefox" :value="2">
                            </el-option>
                            <el-option label="qq浏览器" :value="3">
                            </el-option>
                            <el-option label="uc浏览器" :value="4">
                            </el-option>
                            <el-option label="Edge" :value="5">
                            </el-option>
                            <el-option label="chrome" :value="6">
                            </el-option>
                            <el-option label="opera" :value="7">
                            </el-option>
                            <el-option label="safari" :value="8">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary"  @click="search">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="content-body" style="margin-top: 15px">
                <el-table :data="errorList" border style="width: 100%">
                    <el-table-column prop="id" label="ID"></el-table-column>
                    <el-table-column prop="project_type" label="项目"></el-table-column>
                    <el-table-column prop="error_type" label="错误类型"></el-table-column>
                    <el-table-column prop="error_info" label="错误信息"></el-table-column>
                    <el-table-column prop="browser_id" label="系统类型"></el-table-column>
                    <el-table-column prop="system_id" label="浏览器"></el-table-column>
                    <el-table-column prop="add_time" label="发生时间"></el-table-column>
                    <el-table-column label="操作">
                        <router-link slot-scope="scope" :to="{ name: 'errordetail', params: { errorId: scope.row.id }}">详情</router-link>
                    </el-table-column>
                </el-table>

                <div class="block" style="margin-top: 15px; text-align:right; display: none">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="filterParams.pageNo"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="100">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less" src="./error-list.less" scope></style>
<script src="./error-list.js"></script>

